<!-- 签名指南 -->
<template>
  <div class="container">
    <div class="tabs-lb">
      <span>AK/SK签名认证操作指导</span>
    </div>
    <div class="signGuide">
      <!-- <h2>系统内采用的加密算法为SHA-256</h2> -->
      <!-- <h4>下面的示例介绍了如何在Vue工程中引用加密方法请求签名。</h4> -->
      <!-- <br /> -->
      <!-- <h2>1. 创建signer.js</h2>
      <codemirror v-model="step1" :options="options"></codemirror>-->
      <!-- <h2>2. 在工程中引入signer.js</h2>
      <codemirror
        class="noAuto"
        v-model="step2"
        :options="options"
      ></codemirror>
      <br />
      <h2>3. 测试签名方法</h2>
      <codemirror
        class="noAuto"
        v-model="step3"
        :options="options"
      ></codemirror>
      <br />
      <h2>4. 访问接口添加请求头</h2>
      <codemirror
        class="noAuto"
        v-model="step4"
        :options="options"
      ></codemirror>-->
      <h4>1. 在系统中申请能力，并被审批通过</h4>
      <h4>2. 在系统【认证鉴权】中创建密钥</h4>
      <h4>3. 计算请求签名，采用sha256加密方式进行签名，示例如下</h4>
      <codemirror class="noAuto" v-model="step3" :options="options"></codemirror>
      <br />
      <h4>4. 将sign、appld以及ts放入header中进行请求</h4>
    </div>
  </div>
</template>

<script>
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/3024-day.css'
import 'codemirror/mode/htmlmixed/htmlmixed.js'
import 'codemirror/mode/javascript/javascript.js'
import { codemirror } from 'vue-codemirror'

import jsFile from 'raw-loader!@/utils/sign.js'
export default {
  name: 'SignGuide',
  components: {
    codemirror
  },
  props: {},
  data() {
    return {
      options: {
        line: true,
        theme: 'rubyblue', // 主题
        tabSize: 4, // 制表符的宽度
        indentUnit: 2, // 一个块应该缩进多少个空格
        firstLineNumber: 1, // 从哪个数字开始计算行数
        readOnly: true, // 只读
        autorefresh: true,
        smartIndent: true, // 上下文缩进
        lineNumbers: false, // 是否显示行号
        styleActiveLine: true, // 高亮选中行
        mode: 'javascript'
      },
      step1: jsFile,
      step2: `import axios from 'axios'
import { getSign } from '@/utils/signer.js'`,
      step3: `let appId = "fgrajvfu"; // Access Key
let appSecret = "Q6DqZmmJw4ZR8twudkg2pg=="; // Secret Key
let ts = "1700810057445"; // 时间戳

let sign = sha256(appId, appSecret, ts)
console.log(sign)

// 5cbc633cb5bcf6ba9ae260f5605ddc59058a8596ab19282b3d55f1d7682ddd9b`,
      step4: `const ak = this.AccessKey
const sk = this.SecretKey
const ts = new Date().getTime()
// 添加请求头
axios.defaults.headers['sign'] = getSign(ak, sk, ts)
axios.defaults.headers['appId'] = ak
axios.defaults.headers['ts'] = ts
// 发起请求
axios.get('http://127.0.0.1/test').then(res => {
  console.log(res)
})`
    }
  },
  computed: {},
  watch: {},
  mounted() {
    // 初始化
    this.init()
  },
  methods: {
    // 初始化
    init() { }
  }
}
</script>

<style lang="scss" scoped>
.signGuide {
  margin-top: 20px;
}
</style>
<style lang="scss">
.CodeMirror {
  padding: 20px;
}
.noAuto {
  .CodeMirror {
    height: auto;
    max-height: 300px;
  }
}
</style>
